<%@page contentType="text/html; charset=UTF-8" language="java" %>
<%@page pageEncoding="UTF-8"%>
<%@ taglib uri="http://struts.apache.org/tags-html"  prefix="html"%>
<%@ taglib uri="http://struts.apache.org/tags-bean"  prefix="bean"%>
<%@ taglib uri="http://struts.apache.org/tags-logic" prefix="logic"%>
<%@ taglib uri="http://displaytag.sf.net" prefix="display" %>
<%@page import="com.kcs.common.utils.commonUtils"%>
<%@page import="com.kcs.common.utils.PropsUtils"%>
<%@page import="com.kcs.common.utils.Constant"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<title>Setup Customer Information</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript" src="jsp/script/jquery/plugin/fancybox/jquery.easing-1.3.pack.js"></script>
<script type="text/javascript" src="jsp/script/jquery/plugin/fancybox/jquery.fancybox-1.3.4.js"></script>
<script type="text/javascript" src="jsp/script/jquery/plugin/fancybox/jquery.fancybox-1.3.4.pack.js"></script> 
<script type="text/javascript" src="jsp/script/jsDatePick.full.1.3.js"></script>   
<script type="text/javascript" src="jsp/script/common.js"></script>  
<link rel="stylesheet" type="text/css" href="jsp/script/jquery/plugin/fancybox/jquery.fancybox-1.3.4.css"/>
<link rel="stylesheet" type="text/css" href="jsp/css/table.css"/>
<link rel="stylesheet" type="text/css" href="jsp/css/jsDatePick_ltr.css" />
<link rel="stylesheet" type="text/css" href="jsp/css/fxmarginStyle.css"/>
<script type="text/javascript">

var g_data;
var g_reset_case;

$(document).ready(function() {
	jQuery("#action").val("init");

	setMarginAccNoFormat();
});

function saveFunction(){
	var id 					= jQuery("#id").val();
	var cifNo 				= jQuery("#cifNo").val();
	var customerName 		= jQuery("#customerName").val();
	var marginAccNo 		= jQuery("#marginAccNo").val();
	var marginAccName 		= jQuery("#marginAccName").val();
	var depositAccNo 		= jQuery("#depositAccNo").val();
	var depositAccName 		= jQuery("#depositAccName").val();
	var customerLimitAmount = jQuery("#customerLimitAmount").val();
	var updateDate 			= jQuery("#updateDate").val();
	var updateBy 			= jQuery("#updateBy").val();
	var rowVersion			= jQuery("#rowVersion").val();
	var customerStatus		= jQuery("[name=customerStatus]:checked").val();

	if(validate()){
		loading();
		jQuery.post("/FxMargin/SetupCustomerInformationServlet",{
			"id"					: id,
			"cifNo"					: cifNo,
			"customerName"	  		: customerName,
			"marginAccNo"			: marginAccNo,
			"marginAccName"			: marginAccName,
			"depositAccNo"		  	: depositAccNo,
			"depositAccName"		: depositAccName,
			"customerLimitAmount"	: removeCommas(customerLimitAmount),
			"updateDate"	  		: updateDate,
			"updateBy"				: updateBy,
			"customerStatus"		: customerStatus,
			"rowVersion"			: rowVersion,
			"action"				: "insert"
			},
			function(data){
				if(data != null && data.data == "s"){
					unloading();
					alert(m_save_success);
					searchUserProFile();
					$.fancybox.close();
				} else if(data.data == "to"){
					unloading();
					alert("Session time out!");
					$.fancybox.close();
				} else if(data.data == "duplicateCifNo"){
					unloading();
					alert(m_duplicate_cif_no);
				}else{
					unloading();
					alert(m_save_fail);
					$.fancybox.close();
				}
				
				},"json").error(
			function(){
				unloading();
				alert("Ajax error");
			}
		);
	}
	
}

function updateFunction(){
	var id 					= jQuery("#id").val();
	var cifNo 				= jQuery("#cifNo").val();
	var customerName 		= jQuery("#customerName").val();
	var marginAccNo 		= jQuery("#marginAccNo").val();
	var marginAccName 		= jQuery("#marginAccName").val();
	var depositAccNo 		= jQuery("#depositAccNo").val();
	var depositAccName 		= jQuery("#depositAccName").val();
	var customerLimitAmount = jQuery("#customerLimitAmount").val();
	var updateDate 			= jQuery("#updateDate").val();
	var updateBy 			= jQuery("#updateBy").val();
	var rowVersion			= jQuery("#rowVersion").val();
	var customerStatus		= jQuery("[name=customerStatus]:checked").val();

	if(validate()){
		loading();
		jQuery.post("/FxMargin/SetupCustomerInformationServlet",{
			"id"					: id,
			"cifNo"					: cifNo,
			"customerName"	  		: customerName,
			"marginAccNo"			: marginAccNo,
			"marginAccName"			: marginAccName,
			"depositAccNo"		  	: depositAccNo,
			"depositAccName"		: depositAccName,
			"customerLimitAmount"	: removeCommas(customerLimitAmount),
			"updateDate"	  		: updateDate,
			"updateBy"				: updateBy,
			"customerStatus"		: customerStatus,
			"rowVersion"			: rowVersion,
			"action"				: "update"
			},
			function(data){
				if(data != null && data.data == "s"){
					unloading();
					alert(m_save_success);
					searchUserProFile();
				} else if(data.data == "to"){
					unloading();
					alert("Session time out!");
				} else {
					unloading();
					alert(m_save_fail);
				}
				$.fancybox.close();
			},"json").error(
			function(){
				unloading();
				alert("Ajax error");
			}
		);
	}
	
}

function validate(){

	var cifNo 				= jQuery("#cifNo").val();
	var customerName 		= jQuery("#customerName").val();
	var marginAccNo 		= jQuery("#marginAccNo").val();
	var marginAccName 		= jQuery("#marginAccName").val();
	var depositAccNo 		= jQuery("#depositAccNo").val();
	var depositAccName 		= jQuery("#depositAccName").val();
	var customerLimitAmount = jQuery("#customerLimitAmount").val();
	
	if(cifNo == "") 				{ alert(m_please_fill_data + " CIF No."); return false;}
	if(customerName == "") 			{ alert(m_please_fill_data + " CustomerName"); return false;}
	if(marginAccNo == "")   		{ alert(m_please_fill_data + " Margin A/C No");   return false;}
	if(marginAccName == "") 		{ alert(m_please_fill_data + " Margin A/C Name"); return false;}
	if(depositAccNo == "") 			{ alert(m_please_fill_data + " Deposit A/C No"); return false;}
	if(depositAccName == "")   		{ alert(m_please_fill_data + " Deposit A/C Name");   return false;}
	if(customerLimitAmount == "") 	{ alert(m_please_fill_data + " Customer Limit Amount"); return false;}
	return true;
}

function openSavePopup(){
	jQuery("#saveDiv").show();
	jQuery("#updateDiv").hide();
	g_reset_case = "save";
	resetPopupFunction();
	openPopup("fancyPopup",function(){});
}

function openUpdatePopup(data){
	jQuery("#saveDiv").hide();
	jQuery("#updateDiv").show();
	g_data = data;
	g_reset_case = "update";
	resetPopupFunction();
	openPopup("fancyPopup",function(){});
	
}

function resetPopupFunction(){

	if(g_reset_case == "save") {
		jQuery("#cifNo").removeAttr('readonly');
		jQuery("#cifNo").removeAttr('class');
		jQuery("#cifNo").val("");
		jQuery("#customerName").val("");
		jQuery("#tfMarginAccNo").val("");
		jQuery("#marginAccName").val("");
		jQuery("#depositAccNo").val("");
		jQuery("#depositAccName").val("");
		jQuery("#customerLimitAmount").val("");
		jQuery("#updateDate").val(getCurrentDate());
		jQuery("#updateBy").val(jQuery("#userLoginName").val());
		jQuery("[name=customerStatus][value=1]").click();
	} else if (g_reset_case == "update") {
		var data = g_data;
		
		jQuery("#cifNo").attr('readonly','readonly');
		jQuery("#cifNo").attr('class','disabled');
		jQuery("#id").val(data.id);
		jQuery("#cifNo").val(data.cifNo);
		jQuery("#customerName").val(data.customerName);
		jQuery("#tfMarginAccNo").val(data.marginAccNo);
		jQuery("#marginAccName").val(data.marginAccName);
		jQuery("#depositAccNo").val(data.depositAccNo);
		jQuery("#depositAccName").val(data.depositAccName);
		jQuery("#customerLimitAmount").val(addCommas(data.custLimitAmt));
		jQuery("#updateDate").val(data.updateDateStr);
		jQuery("#updateBy").val(data.updateBy);
		jQuery("#rowVersion").val(data.rowVersion);
		jQuery("[name=customerStatus][value=" + data.customerStatusCode + "]").click();

		updateMarginAccNoValue();
	}
}

function resetFunction(){
	loading();
	jQuery("#action").val("init");
	submitform();
}

function searchUserProFile(){
	loading();
	jQuery("#action").val("search");
	submitform();
}

function deleteCustomer(id){
	jQuery("#deleteId").val(id);
	jQuery("#action").val("delete");
	var del = confirm(m_do_delete);

	if(del == true){
		loading();
		 submitform();
	}
	else return;	
}

function onChangeAmount(value){
	var maxvalue 	= 9999999999999.99;
	var result 		= removeCommas(value); 
	if(result == "." || result == "" ) result = 0; 
	result = parseFloat(result);
	
	if(result > maxvalue) result = maxvalue;
	
	jQuery("#customerLimitAmount").val(addCommas(result.toFixed(2)));
}

function isAmount(event, value) {
	
	if((Math.floor(value) + "").length < 13){
		if(event.keyCode > 47 && event.keyCode < 58 ){return true; } 
		else if(event.keyCode == 46 ) { return true;}
	}
	event.returnValue = false;
}

function setMarginAccNoFormat(){
	var tfMarginAccNo = document.getElementById("tfMarginAccNo");
	var marginAccNo = document.getElementById("marginAccNo");
	var tmp = marginAccNo.value;
	var result = null;
	
	if(tmp != ""){
		tmp = marginAccNo.value.replace(/-/g,"");
		tmp = lpad(tmp,10,"0");

		result = "";
		for(var i=0; i<tmp.length; i++){
			if(i==3 || i==4 || i==9){
				result += "-" +tmp.charAt(i);
			}else{
				result += tmp.charAt(i);
			}
		}
	
	}else{
		result = "";
	}
	
	tfMarginAccNo.value = result;
}

function updateMarginAccNoValue(){
	var tfMarginAccNo = document.getElementById("tfMarginAccNo");
	var marginAccNo = document.getElementById("marginAccNo");
	var result = tfMarginAccNo.value.replace(/-/g,"");

	if(!isNaN(result) && result != ""){
		result = parseInt(result,10);
	}else{
		result = "";
	}
	marginAccNo.value = result;
}

function lpad(content,padLength,padChar)
{
	content += "";

	//Length
 	if(content.length > padLength){
		content = content.substring(0,padLength)
 	}

 	for(var i=content.length; i<padLength; i++){
		content = padChar + content;
 	}
 	
 	return content;
}

</script>
</head>
<body>

<%@ include	file="include/headerMenu.jsp"%>

<center>
<div style="width:95%" align="center">

	<html:form action="/SetupCustomerInformationAction.do">
		<html:hidden property="action" 		styleId="action"/>
		<html:hidden property="deleteId" 	styleId="deleteId"/>
		
		<table width="100%" class="MarginHeader">
			<tr>
				<td align="left">Customer Information</td>
			</tr>
		</table>
		
		<div class="CriteriaBox">
			<table width="100%" class="MarginCriteria">
				<tr>
					<td width="50%" align="right">CIF No. :</td>
					<td width="50%" align="left" ><html:text property="cifNo" maxlength="30"></html:text></td>
				</tr>
				<tr>
					<td width="50%" align="right">Customer Name :</td>
					<td width="50%" align="left" ><html:text property="customerName" maxlength="50"></html:text></td>
				</tr>			
			</table>
			
			<table width="100%" class="MarginCriteria">
				<tr>
					<td width="100%" align="center">
						<input type="button" class="button" value="Search" onclick="searchUserProFile();"/>
						&nbsp;&nbsp;
						<input type="button" class="button" value="Reset" onclick="resetFunction();"/>
						&nbsp;&nbsp;
						<input type="button" class="button" value="New" onclick="openSavePopup();"/>
					</td>
				</tr>
			</table>
		</div>
		
		<logic:present name="<%=Constant.SHOW_RESULT%>">
			<div class="MarginTable">
				<display:table id="data" name="sessionScope.SetupCustomerInformationActionForm.customerInformationBOList" requestURI="/SetupCustomerInformationAction.do" pagesize="10" >
					
					<display:column property="rowNum"			title="No" sortable="false" class="center"/>
					<display:column property="cifNo"   			title="CIF No."   sortable="false" class="left"/>
					<display:column property="customerName" 	title="Customer Name" sortable="false" class="left"/>				
					<display:column property="marginAccNo" 		title="Margin A/C No." sortable="false" class="left"/>		
					<display:column property="marginAccName"	title="Margin A/C Name" sortable="false" class="left"/>		
					<display:column property="depositAccNo" 	title="Deposit A/C No." sortable="false" class="left"/>		
					<display:column property="depositAccName" 	title="Deposit A/C Name" sortable="false" class="left"/>		
					<display:column property="custLimitAmt" 	title="Customer Limit Amount(THB)" sortable="false" format="{0,number,#,##0.00}" class="right"/>		
					<display:column property="updateDate" 		title="Update Date" sortable="false" format="{0,date,dd/MM/yyyy}" class="center"/>
					<display:column property="updateBy" 		title="Update By" sortable="false" class="left"/>
					<display:column title="Edit" sortable="false" class="center">
						<img src="jsp/images/edit.png" alt="Edit" style="width:30px;cursor:pointer;" onclick="openUpdatePopup({${data.jsonObject}});"/>
					</display:column>
					<display:column title="Delete" sortable="false" class="center">
						<img src="jsp/images/delete.png" alt="Delete" style="width:30px;cursor:pointer;" onclick="deleteCustomer('${data.id}');"/>
					</display:column>
				</display:table>
			</div>
		</logic:present>

		<div style="display:none">
	        <div id="fancyPopup" style="width:450px">
	        	<input type="hidden" id="id" value=""/>
	        	<input type="hidden" id="rowVersion" value="0"/>
	            <table width="100%" class="MarginHeader">
					<tr>
						<td colspan="2" align="left">Customer Information</td>
					</tr>
				</table>
				<table width="100%" class="MarginCriteria">
					<tr>
						<td width="50%" align="left"><font color="red">* </font>CIF No. </td>
						<td width="50%" align="left" ><input type="text" id="cifNo" maxlength="30"/></td>
					</tr>
					<tr>
						<td width="50%" align="left"><font color="red">* </font>Customer Name </td>
						<td width="50%" align="left" ><input type="text" id="customerName" maxlength="50"/></td>
					</tr>
					<tr>
						<td width="50%" align="left"><font color="red">* </font>Margin A/C No. </td>
						<td width="50%" align="left" >
							<input type="text" id="tfMarginAccNo" maxlength="13" onBlur="updateMarginAccNoValue();setMarginAccNoFormat();"/>
							<input type="hidden" id="marginAccNo"/>
						</td>
					</tr>
					<tr>
						<td width="50%" align="left"><font color="red">* </font>Margin A/C Name </td>
						<td width="50%" align="left" ><input type="text" id="marginAccName" maxlength="50"/></td>
					</tr>
					<tr>
						<td width="50%" align="left"><font color="red">* </font>Deposit A/C No. </td>
						<td width="50%" align="left" ><input type="text" id="depositAccNo" maxlength="12"/></td>
					</tr>
					<tr>
						<td width="50%" align="left"><font color="red">* </font>Deposit A/C Name </td>
						<td width="50%" align="left" ><input type="text" id="depositAccName" maxlength="50"/></td>
					</tr>
					<tr>
						<td width="50%" align="left"><font color="red">* </font>Customer Limit Amount (THB) </td>
						<td width="50%" align="left" ><input type="text" id="customerLimitAmount" onkeypress="return isAmount(event ,this.value);" onchange="onChangeAmount(this.value);"  maxlength="20"/></td>
					</tr>
					<tr>
						<td width="50%" align="left">Update Date </td>
						<td width="50%" align="left" ><input type="text" id="updateDate" class="disabled" readonly="readonly"/></td>
					</tr>
					<tr>
						<td width="50%" align="left">Update By </td>
						<td width="50%" align="left" ><input type="text" id="updateBy" class="disabled" readonly="readonly"/></td>
					</tr>
					<tr>
						<td width="50%" align="left">Customer Status </td>
						<td width="50%" align="left" >
							<logic:iterate name="customerStatusList" id="customerStatusId">
								<input type="radio" name="customerStatus" value='<bean:write name="customerStatusId" property="code"/>'/> 
								<bean:write name="customerStatusId" property="name"/>&nbsp;&nbsp;
							</logic:iterate>
						</td>
					</tr>			
				</table>
				<table width="100%">
					<tr>
						<td width="33%" align="center">
							<div id="saveDiv"><input type="button" class="button" value="save" id="save" onclick="saveFunction();"/></div>
							<div id="updateDiv"><input type="button" class="button" value="save" id="update" onclick="updateFunction();"/></div>
						</td>
						<td width="33%" align="center"><input type="button" class="button" value="reset" onclick="resetPopupFunction();"/></td>
						<td width="34%" align="center"><input type="button" class="button" value="close" onclick="$.fancybox.close();"/></td>
					</tr>
				</table>
	            
	        </div>
	    </div>
	    
	    <% 
	    Object err = request.getAttribute(Constant.ERR_ATTR);
									
		if(err != null){
		%>
			<script type="text/javascript">
				alert("<%=err%>");
			</script>
		<%
		}
		
		%>
		
		<%@ include	file="include/footer.jsp"%> 
		<%@ include	file="include/message.jsp"%> 
	</html:form>	
	
</div>
</center>

</body>
</html>